<script setup>
import { ref } from 'vue'

const checked = ref(true)
const checked1 = ref('北京')
const checked2 = ref(false)

const A = ()=> {
  console.log(checked2.value)
}

const B = ()=> {
  console.log(checkList.value)
}

const checkList = ref(['北京', '郑州'])

</script>

<template>
  <el-checkbox v-model="checked">北京</el-checkbox>
  <el-checkbox v-model="checked">上海</el-checkbox>
  <el-checkbox v-model="checked">天津</el-checkbox>
  <h1>禁用</h1>
  <el-checkbox v-model="checked" disabled>北京</el-checkbox>
  <el-checkbox v-model="checked" disabled>上海</el-checkbox>

  <h1>带有边框</h1>
  <el-checkbox v-model="checked" border>北京</el-checkbox>
  <el-checkbox v-model="checked" border>上海</el-checkbox>

  <h1>选中状态的值</h1>
  <el-checkbox v-model="checked1" true-label="北京">北京</el-checkbox>
  <el-checkbox v-model="checked1" true-label="上海">上海</el-checkbox>


  <h1>事件</h1>
  <el-checkbox v-model="checked2" @change="A">北京</el-checkbox>

  <h1>复选框组</h1>
  <el-checkbox-group v-model="checkList" @change="B">
    <el-checkbox label="北京" />
    <el-checkbox label="上海" />
    <el-checkbox label="西安" />
    <el-checkbox label="禁用" disabled />
    <el-checkbox label="郑州" disabled />
  </el-checkbox-group>

</template>

<style scoped>

</style>